<template>
  <div>
    <el-form
      class="input-form"
      label-position="right"
      label-width="220px"
      ref="editForm"
      :rules="propRules"
      :disabled="propReadonly"
      :model="form"
    >
      <el-collapse v-model="activeNames">
        <el-collapse-item title="站点信息" name="1">
          <el-row :gutter="20" style="margin-top: 10px">
            <el-col :span="12">
              <el-form-item label="站点编号" prop="stationCode">
                <el-input v-model="form.stationCode" ref="stationCode" placeholder="输入或选择">
                  <FortenDataviewDown
                    slot="append"
                    ref="stationCode"
                    propDownType="form"
                    propFieldText="stationCode"
                    propClickType="button"
                    :propForm="form"
                    @select-change="selectChange"
                    :propUserParam="{ viewKey: 'fsd_getBindStationCodeService' }"
                    :propTableQueries="$newWrapper()"
                    :propDisabledInput="propReadonly"
                  ></FortenDataviewDown>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="站点名称" prop="stationName">
                <el-input v-model="form.stationName" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="设备类型" prop="type">
                <el-select v-model="form.type" filterable>
                  <el-option value="">请选择</el-option>
                  <el-option
                    v-for="dict in propDictionaries['type']"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="门禁关闭时间(s)" prop="autoCloseDoorSpan" v-if="form.type == 'room'">
                <el-input v-model.number="form.autoCloseDoorSpan" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开门报警时长(s)" prop="doorOpenAlertSpan">
                <el-input v-model.number="form.doorOpenAlertSpan" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="自动登出时长(s)" prop="autoLogoutSpan">
                <el-input v-model.number="form.autoLogoutSpan" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="自动上传数据时长(s)" prop="autoUploadSpan">
                <el-input v-model.number="form.autoUploadSpan" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="自动下载数据时长(s)" prop="autoDownloadSpan">
                <el-input v-model.number="form.autoDownloadSpan" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="工号长度" prop="jobNumberMax">
                <el-input v-model.number="form.jobNumberMax" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码长度" prop="passwordMax">
                <el-input v-model.number="form.passwordMax" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="关灯时间" prop="lampCloseSpan">
                <el-input v-model.number="form.lampCloseSpan" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="扫描时间" prop="scanTime">
                <el-input v-model.number="form.scanTime" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="站点说明" prop="remark">
                <el-input v-model="form.remark" type="textarea" :rows="1" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="低值自动消耗触发比例(%)" prop="autoConsumeRatio">
                <el-input v-model.number="form.autoConsumeRatio" :rows="1" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
             <el-col :span="12">
             <el-form-item label="是否自动移库" prop="autoTransfer">
              <el-checkbox v-model="form.autoTransfer" />
               </el-form-item>
            </el-col>   
          </el-row>
          <el-row :gutter="20" style="margin-bottom: 10px">
            <el-col :span="12" class="btnLine">
              <el-button type="primary" @click="isHumitureOpen = true">配置温湿度传感器</el-button>
            </el-col>
            <el-col :span="12" class="btnLine">
              <el-button type="primary" @click="isRfidFilterOpen = true">配置RFID过滤名单</el-button>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="设备管理" name="2">
          <el-row v-show="strings.isNotBlank(form.id)">
            <data-view
              v-show="propStatus === 'edit'"
              propViewKey="fsd_chest"
              propViewForm="fsd/station/chest/detail.vue"
              :propInitData="form"
              ref="childDataView"
              @extra-button-click="handelExtraButton"
              :propHideQueryButton="true"
            />
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <el-drawer
      title="配置温湿度传感器"
      :visible.sync="isHumitureOpen"
      direction="rtl"
      :modal="false"
    >
      <div class="setDrawer">
        <div class="humitureTop">
          <el-button type="primary" icon="el-icon-plus" @click="humitureAdd" class="humitureBtn">新增传感器</el-button>
        </div>
        <div class="humitureMid">
          <div class="text">
            <div>填写传感器地址，勾选所接的温湿度探头编号，并填写对应备注信息。</div>
          </div>
          <div v-if="isHasHumiture" class="list">
            <div v-for="(terminal, terminalIndex) in humitureList" :key="terminalIndex" class="terminal">
              <div class="terminalTop">
                <div class="terminalTitle">传感器地址</div>
                <el-input placeholder="请输入地址" v-model="terminal.addr" class="terminalAddr" />
                <el-button type="danger" icon="el-icon-close" @click="terminalDel(terminalIndex)" />
              </div>
              <div class="terminalMid">
                <div v-for="(probe, probeIndex) in terminal.probe" :key="probeIndex" class="probe">
                  <div :class="{'set': probe.isSet}" class="probeNo">
                    <el-checkbox v-model="probe.isSet" />
                    <span>{{ probeIndex + 1 }}</span>
                  </div>
                  <el-input placeholder="请输入探头备注" :disabled="!probe.isSet" v-model="probe.remark" class="probeRemark"></el-input>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="emptyList">
            <div class="emptyListContent">
              <i class="el-icon-warning emptyListIcon"></i>
              无传感器配置
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      title="配置RFID过滤名单"
      :visible.sync="isRfidFilterOpen"
      direction="rtl"
      :modal="false"
    >
      <div class="setDrawer">
        <div class="rfidFilterBtns">
          <el-button type="primary" icon="el-icon-plus" @click="addWhiteList" class="rfidFilterBtn">新增白名单</el-button>
          <el-button type="warning" icon="el-icon-plus" @click="addBlackList" class="rfidFilterBtn">新增黑名单</el-button>
        </div>
        <div class="rfidFilterList">
          <div class="rfidFilterListHalf">
            <div class="rfidFilterListTitle whiteListTitle">
              白名单列表
            </div>
            <div v-if="isHasWhiteList" class="fullRfidFilterList">
              <div v-for="(white, whiteIndex) in whiteList" :key="whiteIndex" class="rfidFilterInputWrap">
                <el-input placeholder="请输入关键首字段" v-model="whiteList[whiteIndex]" class="rfidFilterInput" />
                <div class="rfidFilterInputDelBtn">
                  <el-button type="danger" icon="el-icon-delete" @click="delWhiteList(whiteIndex)" />
                </div>
              </div>
            </div>
            <div v-else class="emptyRfidFilterList">
              <div class="emptyListContent">
                <i class="el-icon-warning emptyWhiteListIcon"></i>
                无白名单配置
              </div>
            </div>
          </div>
          <div class="rfidFilterListHalf">
            <div class="rfidFilterListTitle blackListTitle">
              黑名单列表
            </div>
            <div v-if="isHasBlackList" class="fullRfidFilterList">
              <div v-for="(black, blackIndex) in blackList" :key="blackIndex" class="rfidFilterInputWrap">
                <el-input placeholder="请输入关键首字段" v-model="blackList[blackIndex]" class="rfidFilterInput" />
                <div class="rfidFilterInputDelBtn">
                  <el-button type="danger" icon="el-icon-delete" @click="delBlackList(blackIndex)" />
                </div>
              </div>
            </div>
            <div v-else class="emptyRfidFilterList">
              <div class="emptyListContent emptyBlackListBorder">
                <i class="el-icon-warning emptyBlackListIcon"></i>
                无黑名单配置
              </div>
            </div>

          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      viewData: {},
      activeNames: ['1', '2'],

      isHumitureOpen: false,
      isHasHumiture: false,
      humitureList: [
        // {
        //   addr: '',
        //   probe: [
        //     {
        //       isSet: false,
        //       remark: ''
        //     },
        //     {
        //       isSet: false,
        //       remark: ''
        //     },
        //     {
        //       isSet: false,
        //       remark: ''
        //     },
        //     {
        //       isSet: false,
        //       remark: ''
        //     },
        //     {
        //       isSet: false,
        //       remark: ''
        //     },
        //     {
        //       isSet: false,
        //       remark: ''
        //     }
        //   ]
        // }
      ],

      isRfidFilterOpen: false,
      isHasBlackList: false,
      isHasWhiteList: false,
      blackList: [],
      whiteList: []
    }
  },
  methods: {
    async handelExtraButton(para) {
      let that = this
      if (para.button.key == 'addChest') {
        await that.utilVue.loadShow(true)
        await that.$ajax.post('back_front/chests/addChest', { stationId: that.form.id }).then((response) => {
          that.utilVue.loadHide()
          if (response.code == 0) {
            that.utilMessage.success(response.msg)
            that.$refs.childDataView.ocRefresh()
          } else {
            that.utilMessage.error(response.msg)
          }
        })
      }
      if (para.button.key == 'removeChest') {
        await that.utilVue.loadShow(true)
        await that.$ajax.post('back_front/chests/removeChest', { stationId: that.form.id }).then((response) => {
          that.utilVue.loadHide()
          if (response.success) {
            // that.propParent.ocRefresh()
            that.$refs.childDataView.ocRefresh()
          } else {
            that.utilMessage.error(response.msg)
          }
        })
      }
    },
    getChildViewQueryWrapper() {
      if (this.form.id) {
        return this.$newWrapper().eq('stationId', this.form.id)
      } else {
        return this.$newWrapper().ne('1', 1)
      }
    },
    getChildRows() {
      if (!this.$refs.childDataView) {
        return []
      }
      return this.$refs.childDataView.getRows0()
    },
    selectChange({ fieldText, row }) {
      this.$set(this.form, 'stationCode', row.stationCode)
      this.$set(this.form, 'stationName', row.stationName)
    },
    humitureAdd() {
      let obj = {
        addr: '',
        probe: [
          {
            isSet: false,
            remark: ''
          },
          {
            isSet: false,
            remark: ''
          },
          {
            isSet: false,
            remark: ''
          },
          {
            isSet: false,
            remark: ''
          },
          {
            isSet: false,
            remark: ''
          },
          {
            isSet: false,
            remark: ''
          }
        ]
      }
      this.humitureList.push(obj)
      this.isHasHumiture = true
    },
    terminalDel(index) {
      this.humitureList.splice(index, 1)
      if (this.humitureList.length === 0) {
        this.isHasHumiture = false
      }
    },
    addWhiteList() {
      this.whiteList.push('')
      this.isHasWhiteList = true
    },
    addBlackList() {
      this.blackList.push('')
      this.isHasBlackList = true
    },
    delWhiteList(index) {
      this.whiteList.splice(index, 1)
      if (this.whiteList.length === 0) {
        this.isHasWhiteList = false
      }
    },
    delBlackList(index) {
      this.blackList.splice(index, 1)
      if (this.blackList.length === 0) {
        this.isHasBlackList = false
      }
    },
    changeJsonToObject() { // 转变form中humiture数据的格式，用以显示。
      if (this.form.humiture) {
        this.humitureList = JSON.parse(this.form.humiture)
        this.isHasHumiture = true
      } else {
        this.isHasHumiture = false
      }
      if (this.form.rfidFilter) {
        let temp = JSON.parse(this.form.rfidFilter)
        if (temp.blackList) {
          this.blackList = temp.blackList
          this.isHasBlackList = true
        } else {
          this.blackList = []
          this.isHasBlackList = false
        }
        if (temp.whiteList) {
          this.whiteList = temp.whiteList
          this.isHasWhiteList = true
        } else {
          this.whiteList = []
          this.isHasWhiteList = false
        }
      } else {
        this.isHasWhiteList = false
      }
    },
    changeJsonToString() { // 转变humitureList数据的格式，用以form提交。
      if (this.humitureList) {
        this.form.humiture = JSON.stringify(this.humitureList)
      }
      
      let obj = {
        blackList: [],
        whiteList: []
      }
      if (this.blackList) {
        this.blackList.forEach((item) => {
          let tempItem = item.trim()
          if (tempItem !== '') {
            obj.blackList.push(tempItem)
          }
        })
      }
      if (this.whiteList) {
        this.whiteList.forEach((item) => {
          let tempItem = item.trim()
          if (tempItem !== '') {
            obj.whiteList.push(tempItem.trim())
          }
        })
      }
      this.form.rfidFilter = JSON.stringify(obj)
    }
  },
  created() {
    let that = this
    this.$emit('event-register', {
      validate: (callback) => {
        this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        let flag = false
        if (Array.isArray(this.humitureList)) {
          if (this.humitureList.length > 0) {
            this.humitureList.forEach(item => {
              if (item.addr === '') {
                flag = true
              }
            })
            if (flag) {
              this.$message({
                message: '有传感器未设置地址，请查看',
                type: 'warning'
              })
              this.isHumitureOpen = true
              return false
            }
          }
        }
        this.changeJsonToString()

        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)

        if (formData.id) {
          this.$refs.childDataView.setQueryWrapper(this.$newWrapper().eq('stationId', this.form.id))
        } else {
          this.$refs.childDataView.setQueryWrapper(this.$newWrapper().ne(1, 1))
        }

        let wrapper = this.getChildViewQueryWrapper()
        this.$refs.childDataView.setQueryWrapper(wrapper)
        // 设置switch 元素默认值
        if (this.propStatus == 'addnew') {
          this.$set(this.form, 'autoCloseDoorSpan', 10)
          this.$set(this.form, 'doorOpenAlertSpan', 30)
          this.$set(this.form, 'autoLogoutSpan', 30)
          this.$set(this.form, 'autoUploadSpan', 30)
          this.$set(this.form, 'autoDownloadSpan', 30)
          this.$set(this.form, 'lampCloseSpan', 30)
          this.$set(this.form, 'scanTime', 6)
          this.$set(this.form, 'jobNumberMax', 4)
          this.$set(this.form, 'passwordMax', 6)
          this.$set(this.form, 'humiture', null)
          this.$set(this.form, 'blackList', null)
          this.$set(this.form, 'rfidFilter', {})
          this.$set(this.form.rfidFilter, 'blackList', [])
          this.$set(this.form.rfidFilter, 'whiteList', [])
        }
        this.changeJsonToObject()
      },
      afterSave: () => {
        this.utils.refreshRefs(this)
      },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {},
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {},
      beforeClose: () => {
        return true
      },
      async afterClick(button, data, viewForm) {
        let { key: buttonKey } = button
        if (buttonKey == 'addChest') {
          await that.utilVue.loadShow(true)
          await that.$ajax.post('back_front/chests/addChest', { stationId: that.form.id }).then((response) => {
            if (response.code == 0) {
              that.utilMessage.success(response.msg)
              that.utilVue.loadHide()
            } else {
              that.utilMessage.error(response.msg)
            }
          })
        }
        if (buttonKey == 'removeChest') {
          await that.utilVue.loadShow(true)
          await that.$ajax.post('back_front/chests/removeChest', { stationId: that.form.id }).then((response) => {
            that.utilVue.loadHide()
            if (response.success) {
              that.propParent.ocRefresh()
            } else {
              that.utilMessage.error(response.msg)
            }
          })
        }
      }
    })
  },
  watch: {
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object,
  },
  components: {},
  computed: {
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
.collapseItem {
  padding: 10px;
}
.btnLine {
  display: flex;
  justify-content: flex-end;
}
.setDrawer {
  width: 100%;
  height: 100%;
  padding: 15px;
}
  .humitureTop {
    width: 100%;
    height: 5%;
    display: flex;
    align-items: center;
  }
    .humitureBtn {
      font-size: 16px;
      letter-spacing: 1px;
    }
  .humitureMid {
    width: 100%;
    height: 95%;
    padding: 0px 10px;
  }
    .text {
      color: rgb(130, 130, 130);
    }
    .list {
      width: 100%;
      height: 90%;
      display: flex;
      align-items: center;
      flex-direction: column;
      background: rgb(240, 240, 240);
      border-radius: 6px;
      overflow: auto;
    }
    .list::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 5px;  /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    .list::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px #999999;
      background: #8f8f8f;
    }
    .list::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px #999999;
      border-radius: 10px;
      background: #ededed;
    }
      .terminal {
        width: 96%;
        margin: 10px 0px;
        border-radius: 16px;
        border: 2px solid rgb(58, 142, 230);
      }
        .terminalTop {
          width: 100%;
          height: 32px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          overflow: hidden;
          border-radius: 10px 10px 0px 0px;
          background: rgb(58, 142, 230);
        }
          .terminalTitle {
            width: 150px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
          }
          .terminalAddr {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
          }
          .terminalDelBtn {
            width: 30px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #F56C6C;
            color: white;
          }
        .terminalMid {
          width: 100%;
          padding: 5px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
        }
          .probe {
            width: 100%;
            margin: 10px 0px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
            .probeNo {
              width: 45px;
              height: 32px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              margin-right: 5px;
              border-radius: 4px;
            }
              .set {
                color: white;
                background: rgb(130, 177, 228);
              }
            .probeRemark {
              flex: 1;
            }

    .emptyList {
      width: 100%;
      height: 90%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
      .emptyListContent {
        width: 60%;
        height: 120px;
        background: rgb(236, 248, 255);
        border-radius: 10px;
        border-top: solid 5px rgb(80, 191, 255);
        color: rgb(92, 92, 92);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 18px;
        letter-spacing: 2px;
      }
      .emptyListIcon {
        font-size: 30px;
        margin-bottom: 10px;
      }
      .emptyWhiteListIcon {
        font-size: 30px;
        margin-bottom: 10px;
        color: #409EFF;
      }
      .emptyBlackListIcon {
        font-size: 30px;
        margin-bottom: 10px;
        color: #E6A23C;
      }
      .emptyBlackListBorder {
        border-top: solid 5px #E6A23C;
      }
  .rfidFilterBtns {
    width: 100%;
    height: 5%;    
  }
    .rfidFilterBtn {
      font-size: 16px;
      letter-spacing: 1px;
    }
  .rfidFilterList {
    width: 100%;
    height: 95%;
  }
    .rfidFilterListHalf {
      width: 100%;
      height: 45%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: rgb(240, 240, 240);
      border-radius: 6px;
      padding: 10px 10px;
      margin: 10px 0px 20px 0px;
    }
      .rfidFilterListTitle {
        width: 100%;
        height: 40px;
        margin-bottom: 10px;
        font-size: 18px;
        display: flex;
        align-items: center;
        padding-left: 10px;
        color: white;
        letter-spacing: 2px;
        border-radius: 6px;
      }
      .whiteListTitle {
        background: linear-gradient(to right, #409EFF, rgb(240, 240, 240) 80%);
      }
      .blackListTitle {
        background: linear-gradient(to right, #E6A23C, rgb(240, 240, 240) 80%);
      }
      .fullRfidFilterList {
        width: 95%;
        height: 1px;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
      }
      .fullRfidFilterList::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 5px;  /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }
      .fullRfidFilterList::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow: inset 0 0 5px #999999;
        background: #8f8f8f;
      }
      .fullRfidFilterList::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px #999999;
        border-radius: 10px;
        background: #ededed;
      }
        .rfidFilterInputWrap {
          width: 90%;
          margin: 10px 0px;
          display: flex;
          justify-content: space-around;
        }
          .rfidFilterInput {
            width: 1px;
            flex: 1;
          }
          .rfidFilterInputDelBtn {
            width: 40px;
            margin-left: 10px;
          }
      .emptyRfidFilterList {
        width: 95%;
        height: 1px;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
</style>
